<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>北京气象局雷达图</title>
    <link href="__PUBLIC__/static/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <link href="__PUBLIC__/static/weather/css/map.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="http://at.alicdn.com/t/font_h7kzjh23cu5fjemi.css"/>
    <style>
    	.player{
    		width: 100%;
    		height: 50px;
  			background: #2892dc;  		
      }
      .back_btn{
      	width: 50%;
      	height: 50px;
      	line-height: 50px;
      	text-align: center;
      	float: left;
      }
    	.play_btn1{
      	width: ;
      	height: 50px;
      	line-height: 50px;
      	text-align: center;
      	float: left;
      }
      .advance_btn{
      	width: 50%;
      	height: 50px;
      	line-height: 50px;
      	text-align: center;
      	float: left;
      }
      .icon-xiayishou{
      	color: #fff;
 				font-size: 28px;
 				line-height: 20px;
      }
      .icon-shangyishou{
      	color: #fff;
      	font-size: 28px;
      	line-height: 20px;
     
      }
      .icon-bofang{
      	color: #fff;
      }
      .text{
   			 margin-top: 2px;
   			 margin-left: 5%;
      }
      .text span{
      	 width: 13%;
		     font-size: 14px;
		     text-align: center;
		     margin: 0;
		     padding: 0;
		     border: 1px solid #2892dc !important;
		     border-radius: 5px;
		     margin-left:2%;
		     margin-top: 5px;
   			 background: #red 	!important;
   			 line-height: 30px;
   			 height: 30px;
      }
      .progress1{
      	background:#9ea1a6 ;
      	width: 85%; 
      	height: 5px; 
      	margin-top: 15px;
      	border-radius: 5px;
      	position: absolute;
      	left: 10%;
      }
      #playbutton{
      	left:49%;
      }
      #slideshow img{
      	margin-left: 10px;
      }
      .play_btn .zting{
      	background: none;
      }
      .play_btn .playing{
      	background: none;
      }
      .icon-player-play{
      	color: #fff;
      	font-size:28px;
      	line-height: 20px;
      }
      .icon-zanting1{
      	color: #fff;
      	font-size:28px;
      	line-height: 28px;
      }
      .play span.se {
		    color: #ffffff;
		    background: #00;
		    background: rgba(40, 146, 220, 0.72);
		}
    </style>
  </head>
  <body>
  <div class="container" style="width:auto;">
		<div class="row no_gutter">
			<div class="col-xs-12">
				<div class="jmtq">
            <div id="slideshow">
                <div class="leidaimg">
                    <img id='playing_img' src="/real_weather/radar/{$list[5]['imgname']}">
                </div>

                <div class="play_btn">
                	<!--<div class="tm"></div>
                    <div id="playbutton" class="zting"> </div>
                    <div class="fgx"><img src="http://wx.nmc.cn/newwx//Public/template//ldimages/fgx.png"></div>
                    <div id="offbutton" class="rting"> </div>
                    <div class="progress">
                        <div class="progressfill">
                        	<img src="http://wx.nmc.cn/newwx//Public/template//ldimages/niu.png">
                        </div>
                    </div>
                    <div class="fgxr"><img src="http://wx.nmc.cn/newwx//Public/template//ldimages/fgx.png"></div>-->
                   <!-- 播放器-->
                    <div class="player">
                    	<div style="width:80%; padding-left:10% ;">
                    	<div class="back_btn"><span id="fadd"  class="icon-shangyishou iconfont"></span></div>
                    	<div class="play_btn1"><div id="playbutton" class="zting icon-player-play iconfont" > </div></div>
                    	<div class="advance_btn"><span id='add' class="icon-xiayishou iconfont"></span></div>
                    	</div>
                    </div>
                    <!--新的进度条-->
                    <div class="progress1">
                    	<div class="progressfill">
                        	<img src="http://wx.nmc.cn/newwx//Public/template//ldimages/niu.png">
                      </div>
                    </div>
                </div>
            </div>

		
            <div class="play">
                <div class="text" id="tab1">
                      <volist name='list' id='vo'>
                      <span data-id="{$i}" data-pic="/real_weather/radar/{$vo.imgname}"> {$i}</span>
                      </volist>
                </div>
            </div>
        </div>
        	</div>
		</div>
  </div>
  </body>
  <script src="__PUBLIC__/static/jquery-1.10.2.min.js"></script>
  <script src="__PUBLIC__/static/bootstrap/js/bootstrap.min.js"></script>
  <script>
  $(function(){
	  var imglist 	= [];
	  var imgindex 	= 0;
	  var progressInterval = '';
	  var playTimeinterval  = 1000;
	  var playing	= false;
	  var playHanlder = null;
	  //初始化图片列表
	  $('.play span').each(function(){
		  var imgurl = $(this).attr('data-pic');
		  imglist.push(imgurl);
	  });
	  //初始化进度条间隔宽度
	  progressInterval = 1/(imglist.length)*100;
	  $('#playbutton').click(function(){
		  if(!playing){
			  $(this).removeClass('zting icon-player-play').addClass('playing icon-zanting1');	//切换按钮状态
			  playHanlder = setInterval(playImg, playTimeinterval);
		  }else{
			  $(this).removeClass('playing icon-zanting1').addClass('zting icon-player-play');	//切换按钮状态
			  clearInterval(playHanlder);
			  playHanlder = null;
		  }
		  playing = !playing;
	  });
	  function playImg(){
		  //更新时间点样式
		  var timePointTextSelector = '.play span:eq('+imgindex+')';
		  $(timePointTextSelector).addClass('se').siblings().removeClass('se');
		  //更新对应时间点图片
		  var imgurl = imglist[imgindex++];
		  $('#playing_img').attr('src', imgurl);
		  $('.progressfill').css('width', progressInterval*imgindex+'%');
		  if(imgindex==imglist.length){
			  imgindex=0;
		  }
	  }
$('#playing_img').click(function(){
           $('#playbutton').trigger('click');
        });
	 //时间点被点击触发
	  $('.play span').click(function(){
	  	if($('#playbutton').hasClass('zting')){ //这里的条件，我要他的css样式等于zting才给他触发这个事件
	  		 var index = $('.play span').index($(this));
		  	 imgindex = index;	//调整当前索引位置
		 		 playing = false;	//重置播放状态
		 	   playHanlder=setTimeout(playImg, playTimeinterval);
	  		
	  	}	
	  });
	  $('#add').click(function(){
	  		clearInterval(playHanlder);
			  imgindex=imgindex;
	 			playHanlder=setTimeout(playImg, playTimeinterval);

	 });
	 $('#fadd').click(function(){
	 		clearInterval(playHanlder);
	 		if(!imgindex==0){
	 			imgindex=imgindex-2;
	 			playHanlder=setTimeout(playImg, playTimeinterval);
	 		}
	 });
	 window.onload=function(){
	 		var index = $('.play span').index($(this));
		  imgindex = 11;	//调整当前索引位置
		  playing = false;	//重置播放状态
		  playHanlder=setTimeout(playImg, playTimeinterval);	  
	 }
	  
  });
  </script>
</html>
